<p>{ __("upload / quick help") }</p>

<div class="demo-datasets">
    <p>{ __("upload / try a dataset") }</p>
    <select disabled="{readonly}" id="demo-datasets" bind:value="selectedDataset">
        <option value="--">{ __("upload / sample dataset") }</option>
        {#each datasetsArray as group}
        <optgroup label="{group.type}">
            {#each group.datasets as dataset}
            <option value="{dataset}" class="demo-dataset">{dataset.title}</option>
            {/each}
        </optgroup>
        {/each}
    </select>
</div>

<style>
    select {
        width: 70%;
    }
</style>

<script>
    import { __ } from '@datawrapper/shared/l10n';

    /* globals dw */
    export default {
        data() {
            return {
                selectedDataset: '--'
            };
        },
        computed: {
            datasetsArray({ datasets }) {
                return Object.keys(datasets).map(k => datasets[k]);
            }
        },
        helpers: { __ },
        // eslint-disable-next-line
        onupdate({ changed, current }) {
            if (changed.selectedDataset && current.selectedDataset !== '--') {
                const sel = current.selectedDataset;
                this.set({ chartData: sel.data });
                if (sel.presets) {
                    Object.keys(sel.presets).forEach(k => {
                        dw.backend.currentChart.set(k, sel.presets[k]);
                    });
                }
            }
        }
    };
</script>
